import React from 'react';
import { connect } from 'react-redux';
import {  Form,Button, Input } from 'antd';
import { actionLogin } from '../../redux/login/login.redux.js';
import './login.css';
const FormItem = Form.Item;
const createForm = Form.create;
const Search = Input.Search;
@connect(state => state.auth, {actionLogin})
class phoneLogin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            enterButton:'验证码'
        }
    }
    //点击验证码事件
    clickEnterButton=()=>{
        this.setState({
            enterButton:'剩余60S'
        })
    }
    /*----------登陆表单处理--------------*/
    validatePhone=(rule, value, callback)=>{
        let myreg=/^1[3|4|5|7|8][0-9]{9}$/;
        if (value&&!myreg.test(value)) {
            callback('请输入正确手机号');
        } else {
            callback();
        }
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('手机登陆 ', values);
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;

        return (
                                <Form onSubmit={this.handleSubmit} className="login-form">
                                    <FormItem>
                                        {getFieldDecorator('phone', {
                                            rules: [
                                                { required: true, message: '请输入您的手机号码' },
                                                {validator: this.validatePhone}],
                                            validateTrigger:'onBlur'
                                        })(
                                            <Search placeholder="input search text" enterButton={this.state.enterButton} onSearch={this.clickEnterButton}/>
                                        )}
                                    </FormItem>
                                    <FormItem>
                                        {getFieldDecorator('code', {
                                            rules: [{ required: true, message: 'Please input your Password!' },
                                            ],
                                        })(
                                            <Input type="password" placeholder="Password" />
                                        )}
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary" htmlType="submit" className="login-form-button">
                                            登录
                                        </Button>
                                    </FormItem>
                                </Form>


        )
    }
}
phoneLogin=createForm()(phoneLogin);
export default phoneLogin;